<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		output{
			color: blue;
		}

		.floatingControls{
			background: rgba(0, 0, 0, 0.1);
			border: thin solid skyblue;
			padding: 15px;
			font: 12px Arial;
			box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
		}

		#canvas{
			background: skyblue;
			box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
			cursor: pointer;
		}

		#scoreboard{
			position: absolute;
			left: 755px;
			top: 20px;
			background: rgba(255, 255, 255, 0.5);
			padding: 5px;
			font-size: 18px;
			color: blue;
		}

		#controls{
			position: absolute;
			left: 285px;
			top: 20px;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="800" height="450">Canvas not supported.</canvas>
	<div id="scoreboard" class="floatingControls">0</div>
	<div id="controls" class="floatingControls">
		Launch velocity (m/s):
		<output id="launchVelocityOutput"></output> m/s<br/>

		Launch angle (degrees):
		<output id="launchAngleOutput"></output> degrees<br/>
	</div>
</body>
<script type="text/javascript" src="../Charpter-05/requestNextAnimationFrame.js"></script>
<script type="text/javascript" src="../Charpter-06/Sprite.js"></script>
<script type="text/javascript" src="7.3.js"></script>
</html>